<template>
  <div class="page-wrapper tech-content-bg">
    <div class="page-header" v-if="title">
      <h1 class="tech-title tech-title-large">{{ title }}</h1>
      <p class="tech-text-muted" v-if="description">{{ description }}</p>
    </div>
    
    <div class="page-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string
  description?: string
}

defineProps<Props>()
</script>

<style scoped>
.page-wrapper {
  padding: 20px;
  min-height: calc(100vh - 120px);
  position: relative;
}

.page-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tech-glass-border);
}

.page-header h1 {
  margin: 0 0 8px 0;
}

.page-header p {
  margin: 0;
  font-size: 16px;
}

.page-content {
  position: relative;
  z-index: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-wrapper {
    padding: 16px;
  }
  
  .page-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  
  .page-header h1 {
    font-size: 20px;
  }
  
  .page-header p {
    font-size: 14px;
  }
}
</style>
